// 引入 react 依赖
import React, { Component } from 'react';
import { connect } from 'react-redux';
import { Text, View, Image, TouchableOpacity, ImageBackground, ScrollView } from 'react-native';

// 引入第三方依赖
import _ from 'lodash';
import pureRender from 'pure-render-decorator';
import { Actions } from 'react-native-router-flux';
import Icon from 'react-native-vector-icons/Ionicons';


// antd 按需加载
import { } from '@ant-design/react-native';

// 引入 处理数据 所需文件
import { } from './module.js'

// 引入样式
import Styles from './style.js';

// 引入公用组件
import { } from '../../components/index.js'

// 引入工具包
import {   size, ScreenWidth, hotTextColor, inputTextColor } from '../../util/utils.js'
class Radio extends Component {
    constructor(props) {
        super(props);
        this.state = {
            checked: this.props.checked || false
        }
    }

    getIcon() {
        const { checked } = this.state
        if (checked) {
            return (
                <Image resizeMode='cover' style={{width: 16, height: 16}} source={require('../../static/images/icon-radio-check.png')} />
            )
        } else {
            return (
                <Image resizeMode='cover' style={{width: 16, height: 16}} source={require('../../static/images/icon-radio.png')} />
            )
        }
    }

    componentWillReceiveProps(nextProps) {
        const { checked } = this.props
        if (checked != nextProps.checked) {
            this.setState({
                checked: nextProps.checked
            })
        }
    }

    change() {
        const { onChange } = this.props
        const { checked } = this.state
        this.setState({
            checked: !checked
        })
        if (onChange) {
            onChange(!checked)
        }
    }

    render() {
        const { label, style } = this.props
        return (
            <TouchableOpacity
                style={style}
                onPress={() => {
                    this.change()
                }}
                activeOpacity={.6}
                underlayColor='#fff'
            >
                <View style={{
                    flexDirection: 'row',
                    alignItems: 'center',
                }}>
                    {this.getIcon()}
                    {label ? <Text allowFontScaling={false} style={{ fontSize: 14, color: '#61676F', lineHeight: 18, marginLeft: 5 }}>{label}</Text> : null}
                </View>
            </TouchableOpacity>
        )
    }
}

export default pureRender(Radio)
